<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>用户登录 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css?t=23241">
   <style>
      body {
         text-align: center;
         background: url("/images/bg.jpeg") no-repeat;
         background-size: 100%;
      }

      .divcss5 {
         margin: 0 auto
      }
   </style>
</head>

<body>
   <div id="app">
      <div style="text-align: left;font-size: 30px;color: #ccc;margin:20px 0px 0px 20px;">
         {{sysconfig.appName}}
         <a href="/other/aqxx.101.zip"><i style="font-size: 10px;margin: 0px 0px 30px 10px;">App</i></a>
      </div>
      <div style="width: 400px;text-align:left;" class="divcss5">
         <el-card class="box-card" :style="{marginTop:tagHeight + 'px'}">
            <div slot="header" class="clearfix">
               <span>用户登录</span>
            </div>
            <div>
               <el-form v-loading="loadLoading" ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">
                  <el-form-item label="手机号：" prop="phone">
                     <el-input v-model="loginForm.phone" autofocus></el-input>
                  </el-form-item>
                  <el-form-item label="手机号：" v-show="false">
                     <el-input v-model="loginForm.phone1"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号：" v-show="false">
                     <el-input v-model="loginForm.phone2"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：" prop="password">
                     <el-input v-model="loginForm.password" show-password @keyup.enter.native="submitLogin"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：" v-show="false">
                     <el-input v-model="loginForm.password2" show-password @keyup.enter.native="submitLogin"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：" v-show="false">
                     <el-input v-model="loginForm.password2" show-password @keyup.enter.native="submitLogin"></el-input>
                  </el-form-item>
                  <el-form-item>
                     <el-button type="primary" @click="submitLogin">登 录</el-button>
                     <el-button>取消</el-button>
                  </el-form-item>
               </el-form>
            </div>
         </el-card>
      </div>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/validate.js"></script>

<script>
   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            tagHeight: window.innerHeight / 5, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
            loadLoading: false, // 显示登录等待中
            sysconfig: {},       // 系统配置
            loginForm: {
               phone: '',
               phone1: '',
               phone2: '',
               password: '',
               password1: '',
               password2: '',
            },
            password2: "",
            // 表单中的数据验证规则
            rules: {
               phone: [
                  { required: true, trigger: 'blur', validator: validPhone } // 判断手机号码格式是否正确（必填）
               ],
               password: [
                  { required: true, trigger: 'blur', message: '密码不能为空' }
               ]
            },
         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      methods: {
         // 改变表格高度
         pageResize() {
            this.tagHeight = window.innerHeight / 5;
         },

         // 用户登录
         submitLogin() {
            this.loadLoading = true;
            this.$refs.loginForm.validate((valid) => {
               if (valid) {
                  axios.post('/api/guest/user/login.bu', this.loginForm)
                     .then(function (response) {
                        console.log(response.data);
                        if (response.data.code > 0) {
                           window.location.href = "/html/admin/home.html";
                           vm.loadLoading = false;
                        } else if (response.data.code == 0) {
                           vm.$message.error(response.data.msg);
                           vm.loadLoading = false;
                        } else {
                           vm.$message.error(response.data.msg);
                           vm.loadLoading = false;
                        }
                     })
                     .catch(function (error) {
                        vm.loadLoading = false;
                        vm.$message.error('出错：' + error);
                     });
               } else {
                  vm.loadLoading = false;
                  vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
                  return false;
               }
            });
         }
      },
   });

   // 自动执行，读取表格数据等
   function loadInitData() {

      // 获取系统配置信息
      axios.get('/api/guest/base/sysconfig.bu')
         .then(function (response) {
            console.log(response);
            if (response.data.code > 0) {
               vm.sysconfig = response.data.bundle;
            } else {
               vm.sysconfig = {};
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });
   }

   loadInitData();

</script>

</html>